<template>
    <div class="my-product">
        <!-- <h2>标题：{{ title }}</h2>
    <p>活动价格：{{ price }}</p>
    <p>{{ intro }}</p> -->
        <!-- <h2>标题：{{ obj.Pname }}</h2>
        <p>活动价格：{{ obj.Pprice }}</p>
        <p>{{ obj.Pintro }}</p> -->
        <!--需求：子组件砍价 砍一刀减去1元
            语法： 父组件： @自定义事件名="父组件自定义方法名"
                子组件： this.$emit('自定义事件名', 1)
        -->
        <h2>标题：{{ title }}</h2>
        <p>活动价格：{{ price }}</p>
        <p>{{ intro }}</p>
        <button @click="subFn">砍价减1元</button>

    </div>
</template>
<script>
export default {
    //props: ['title', 'price', 'intro'],
    //  props: ['Pname', 'Pprice', 'Pintro'],
    // props:['obj'],
    props: ['index','title', 'price', 'intro'],
    data() {
        return {
            /**
             * vue中所有页面都是单向数据流
             * 1、父组件的数据发生改变，子组件会自动变化
             * 2、子组件的数据发生改变，父组件不会自动变化
             * 3、子组件不能直接修改父组件中的数据，传递过来的props ，props数据是只读的
             */

        }
    },
    methods: {
        subFn() {
            console.log(this.index);
            //通知父组件
            this.$emit('subprice',this.index,1)
        }
    },
}


</script>
<style scoped>
.my-product {
    width: 100%;
    border: 2px solid #eee;
    font-size: 18px;
    padding: 20px;
}
</style>